let { $, element, layer } = layui;
export default class Index {
    constructor(next) {
        this.render();
        this.handle();
        next();
    }
    render() {
        let template = `
            <!DOCTYPE html>
            <html lang="en">

            <head>
                
            </head>

            <body>
                <div class="layui-layout layui-layout-admin">
                    <div class="layui-header">
                        <div class="layui-logo layui-hide-xs layui-bg-black">猫眼后台管理平台</div>
                        <!-- 头部区域（可配合layui 已有的水平导航） -->
                        <ul class="layui-nav layui-layout-left">

                        </ul>
                        <ul class="layui-nav layui-layout-right">
                            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                                <a id="username" href="javascript:;">
                                    请登录
                                </a>
                                <dl class="layui-nav-child">
                                    <dd><a id="mine" href="#">个人中心</a></dd>
                                    <dd><a id="setting" href="#">设置</a></dd>
                                    <dd><a id="logout" href="#">注销</a></dd>
                                </dl>
                            </li>
                            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                                <a href="javascript:;">
                                    <i class="layui-icon layui-icon-more-vertical"></i>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="layui-side layui-bg-black">
                        <div class="layui-side-scroll">
                            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                            <ul class="layui-nav layui-nav-tree" lay-filter="selected">
                                <li class="layui-nav-item"><a href="#index/users">用户管理</a></li>
                                <li class="layui-nav-item"><a href="#index/films">电影管理</a></li>
                                <li class="layui-nav-item"><a href="#index/cinemas">院线管理</a></li>
                                <li class="layui-nav-item"><a href="#index/fac">电影排片</a></li>
                                <!-- <li class="layui-nav-item"><a href="#index/infos">资讯管理</a></li> -->
                                <li class="layui-nav-item"><a href="#index/hotShow">热映电影</a></li>
                                <li class="layui-nav-item"><a href="#index/soons">即将上映</a></li>
                                <li class="layui-nav-item"><a href="#index/hotPlay">热播影视</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="layui-body">
                        <!-- 内容主体区域 -->
                        <div style="padding: 15px;" id="content"></div>
                    </div>

                    <div class="layui-footer">
                        <!-- 底部固定区域 -->
                    </div>
                </div>
            </body>

            </html>
        `;
        $('#root').html(template);
    }
    handle() {
        element.render();
        $(`[href="${location.hash}"]`).parent().addClass('layui-this');

        $.ajax({
            type: 'get',
            url: '/getToken',
            success(res) {
                $('#username').html(res.data.data.username + '<i class="layui-icon layui-icon-down layui-nav-more"></i>');
            },
        })
        $('#logout').click(function (e) {
            layer.confirm('确定注销?', { title: '提示' }, function (index) {
                localStorage.token = null;
                location.href = '#login';
                layer.close(index);
            });
        })
    }
}